<template>
  <view class="wrapper row">
    <view class="search row flex-center pd_l_30 pd_r_30" style="justify-content: space-between;">
      <u-input v-model="queryform.schoolName" class="flex-1 fon4-24 pd_l_30 pd_r_30"
               confirm-type="search"
               :clearable="false"
               @confirm="search"
               :height="50" placeholder="请输入院校名称进行搜索"/>
      <view class="btn color-active" @click="search">搜索</view>
    </view>
    <view class="dropdown yh_bd_bottom">
      <drop-menu :options="options" @choose="chooseBack"></drop-menu>
    </view>
    <view class="flex-1 main row">
      <scroll-view scroll-y style="height: 100%" @scrolltolower="loadMore" :lower-threshold="70">
        <u-cell-group>
          <u-cell-item use-label-slot v-for="(item, index) in list"
                       :arrow="false" :key="index"
                       :index="index"
                       @click="toDetail(item.id)">
            <view slot="label" class="row label">
              <image :src="item.imgUrl" class="icon" v-if="item.imgUrl" lazy-load @error="loadError"/>
              <u-icon name="photo" v-if="!item.imgUrl" size="110"></u-icon>
              <view class="right pd_l_30">
                <view class="title font-b color-333 font-32 pd_b_10">{{item.schoolName}}</view>
                <view class="font-24 color-999 pd_b_10">所在地：{{item.provinceName}}  学历层次：{{item.uorS || ''}}</view>
                <view class="row">
                  <view class="school_tag font-20 school_tag_0">{{item.schoolType}}</view>
                  <view class="school_tag font-20"
                        :class="{
                          'school_tag_1': indexs == 0,
                          school_tag_2: indexs == 1,
                          school_tag_3: indexs == 2,
                          school_tag_4: indexs == 3,
                          school_tag_5: indexs == 4,
                          school_tag_6: indexs == 5,
                          school_tag_6: indexs == 6,
                        }"
                        :index="indexs"
                        :key="indexs"
                        v-for="(items, indexs) in item.typeId" v-if="items != '-'">{{items}}</view>
                </view>
              </view>
            </view>
          </u-cell-item>
        </u-cell-group>
        <uni-load-more :status="loadStatus"></uni-load-more>
        <u-empty text="暂无数据" mode="list" v-if="!list.length && loadStatus == 'more'"></u-empty>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
  import {request} from "../../util/api";
  import dropMenu from '@/components/my_dropmenu/index'
  import {getCurrentFullPath} from "../../util/util";
  export default {
    components: {
      uniLoadMore,
      dropMenu
    },

    onLoad(option) {
      if (option.type) {
        this.type = option.type
        uni.setNavigationBarTitle({
          title: '选择院校'
        });
      }
    },

    data() {
      return {
        customStyle: {
          background: '#1f476d',
          marginRight: '20px'
        },
        loadStatus: 'more',
        queryform: {
          pageSize: 15,
          pageNum: 1
        },
        list: [],
        options: ['provinceName', 'schoolType', 'typeIds', 'uOrS'],
        type: '' //直接跳转到录取分数线flag
      }
    },

    created() {
      this.getList()
    },

    methods:{
      toDetail(id) {
        this.$u.route({
          url: this.type ? '/pages/explore/school_score?id=' + id : '/pages/explore/school_info?id=' + id
        })
      },

      chooseBack(res) {
        res.admissionsAddress = res.provinceName
        res.uorS = res.uOrS
        this.queryform = Object.assign(this.queryform, res)
        this.list = []
        this.loadStatus != 'more'
        this.getList()
      },

      // 加载更多
      loadMore() {
        if (this.loadStatus != 'none') {
          this.queryform.pageNum += 1
          this.getList()
        }
      },

      getList() {
        this.loadStatus = 'loading'
        request({
          url: '/system/wx/CompassUniversityInfo/list/' +  this.queryform.pageNum + '/' + this.queryform.pageSize,
          token: true,
          data: this.queryform,
          platfom: 'weixin'
        }).then(res => {
          res.list.forEach(item => {
            item.typeId = item.typeIds.replace(/^\s+|\s+$/g, '').split(" ")
          })
          this.list = this.list.concat(res.list)
          if (res.hasNextPage) {
            this.loadStatus = 'more'
          } else {
            this.loadStatus = 'none'
          }
        })
      },

      search() {
        this.queryform.pageNum = 1
        this.list = []
        this.loadStatus != 'more'
        this.getList()
      },

      loadError(e) {

      }
    },
    onShareAppMessage(res) {

    }
  }
</script>

<style scoped lang="scss">
  .wrapper {
    flex-direction: column;
    height: 100%;
    .search {
      width: 100%;
      background: rgba(249, 249, 249, 100);
      padding-top: 20upx;
      padding-bottom: 20upx;

      .flex-1 {
        background: #fff;
        border-radius: 25upx;
        margin-right: 20upx;
      }
    }
    .main {
      height: 100%;
      .label {
        .icon {
          width: 110upx;
          height: 110upx;
        }
      }
    }
  }
</style>
